<template>
  <div class="bg-[red] h-10 z-50 fixed w-12 a_app px-4" v-if="downloadApp">
    <div class="flex justify-between items-center h-full" @click="routerOpen">
      <div class="text-3xl" @click.stop="handleClick">×</div>
      <div class="center">
        {{ $t("layer.app.center") }}
      </div>
      <div class="bg_btn">
        {{ $t("layer.app.Dowload") }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { mainAct } from "@/store/activeda";

const downloadApp = ref(true);
const basisMsg = mainAct();
onMounted(() => {
  let str = window.location.href;
  if (str.includes("apk")) {
    basisMsg.isApp = true;
    downloadApp.value = false;
  }
  basisMsg.gethallIntro();
});

const handleClick = () => {
  downloadApp.value = false;
};

const routerOpen = () => {
  if (process.env.NODE_ENV !== "production") {
    window.open(
      `http://localhost:5174/?ios=${JSON.stringify(basisMsg.download)}`
    );
  } else {
    window.open(
      `${basisMsg.download.customer_service}?ios=${JSON.stringify(
        basisMsg.download
      )}`
    );
  }
};
</script>

<style lang="scss" scoped>
.a_app {
  display: none;
}
@media screen and (max-width: 1023px) {
  .a_app {
    width: 100%;
    height: 54px;
    display: block;
    color: #fff;
    background: url("../../assets/down/bgc.png") no-repeat;
    background-size: 100% 100%;
    bottom: 0;
  }

  .bg_btn {
    width: 130px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 60px;
    background: url("../../assets/down/btn.png") no-repeat;
    background-size: 100% 100%;
  }

  .center {
    font-family: Impact;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 2px;
    text-align: left;
    color: #fff;
  }
}

@media screen and (max-width: 600px) {
  .a_app {
    bottom: 68px;
    font-size: 14px;
  }
}
</style>
